<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>深蓝冲击</title>
		<style type="text/css">
			body {
				background-image: url(yc/img/主题2.png);
				background-repeat: no-repeat;
				background-size: 100% 950px;
			}

			#fash {
				position: absolute;
				top: 500px;
				left: 600px;
				width: 100px;
				height: 100px;
				border-radius: 100px;
			}

			.img {
				width: 50px;
				height: 50px;
				position: absolute;
				top: -100px;
				left: 700px;
			}

			body {
				height: 630px;
				overflow: hidden;
			}

			span {
				font-size: xx-large;
				margin-left: 1500px;
			}

			#aa {
				width: 20px;
				height: 20px;
				position: absolute;
				left: 1300px;
				top: 18px;
			}

			#bb {
				width: 20px;
				height: 20px;
				position: absolute;
				left: 1360px;
				top: 18px;
			}

			#cc {
				width: 20px;
				height: 20px;
				position: absolute;
				left: 1420px;
				top: 18px;
			}
			#sp{
				position: absolute;
				left: 1180px;
				top: 32px;
				color: white;
				font-size: 20px;
				font-family: "楷体";
			}
			#diyi{
				z-index: 99;
				font-family: "楷体";
				margin-top: 400px;
			}
			#info{
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.8);
				display: none;
				z-index: 999999999;
				text-align: center;
				font-size: 40px;
				color: white;
			}
			button{
			    padding: 7px 15px;
			    background-color: rgba(255, 170, 0, 1);
			    text-align: center;
			    border-radius: 5px;
			    overflow: hidden;
			    min-width: 80px;
			    border: none;
			    color: white;
				font-size: 20px;
			    box-shadow: 1px 1px 1px rgba(75,75,75,0.3);
			}
		</style>
	</head>
	<body>
		<div id="info">
			<br><br><br><label id="nn">采集能量</label><br><br>
			<label id="diyi">通过关卡</label><br><br>
			<button onclick="javascript:location.reload()">重新开始</button>
			<button onclick="javascript:location.href='湛蓝海域.html'">下一关》</button>
		</div>
		<img src="yc/img/左.png" id="aa">
		<img src="yc/img/左.png" id="bb">
		<img src="yc/img/左.png" id="cc">
		<input type="range" min="0" max="60" readonly="readonly" value="0" style="position: absolute;left: 1300px;top: 40px;">
		<label id="sp"><label>能量：</label><label id="n">0</label></label>
		<img src="yc/img/主角鱼左.png" id="fash">
		<img src="yc/img/左.png" class="img">
		<script src="yc/js/jquery-1.8.2.js"></script>
		<script>
			var boo = true; //是否胜利
			var numb = 0; //吞噬数量
			var life=10;//生命
			var arr=[60,115,180]//鱼大小

			//初始化鱼的数量
			for (var i = 0; i < 20; i++) {
				loadfash();
			}

			//通用行走方法(屏幕1520*630)
			function method(obj) {
				$(obj).css("left", Math.ceil(Math.random() * 1500) + "px")
				var offx = 0; //横坐标
				var offy = 0; //纵坐标
				var intv = Math.ceil(Math.random() * 2000) - 100; //随机间隔时间
				//边缘判断
				setInterval(function() {
					offx = Math.ceil(Math.random() * 1820); //随机横坐标
					offy = Math.ceil(Math.random() * 1030); //随机纵坐标
					var littlefashfast = 8000;
					if (Math.abs(offx - obj.offsetLeft) > 200) {
						littlefashfast = 1000;
					}
					if (Math.abs(offx - obj.offsetLeft) > 550) {
						littlefashfast = 2000;
					}
					if (Math.abs(offx - obj.offsetLeft) > 850) {
						littlefashfast = 5700;
					}
					if (Math.abs(offx - obj.offsetLeft) > 1200) {
						littlefashfast = 6000;
					}
					if (Math.abs(offx - obj.offsetLeft) > 1400) {
						littlefashfast = 8000;
					}
					if (Math.abs(offy - obj.offsetTop) > 500) {
						littlefashfast = 5000;
					}
					//游动小鱼
					$(obj).animate({
						top: offy + "px",
						left: offx + "px"
					}, littlefashfast)
				}, intv)
			}


			//图片的鼠标移动事件
			var decoration=0;//判断方向的变量
			document.onmousemove = function(event) {
				if(decoration<event.clientX){//左边
					$("#fash").attr("src", "yc/img/主角鱼右.png")
				}else{
					$("#fash").attr("src", "yc/img/主角鱼左.png")
				}
				decoration=event.clientX;
				//胜利验证
				if(numb>60){
					$("#nn").text("采集能量:"+numb)
					$("#info").show(1000)
				}
				//死亡验证
				if(life<=0){
					$("#info").show(1000)
					$("#nn").text("采集能量:"+numb)
					$("#diyi").html("你挂了")
					$("#diyi").show();
					return;
				}
				//主鱼的大小
				var wit2 = $("#fash").css("width");
				wit2 = wit2.substring(0, wit2.length - 2);

				$("#fash")[0].style.left = (event.clientX) + "px";
				$("#fash")[0].style.top = (event.clientY - wit2 / 2) + "px";

				//吃鱼
				$(".img").each(function(i, e) {
					//两个鱼的位置
					var littleoffx = e.offsetLeft; //小鱼横坐标
					var fashoffx = $("#fash")[0].offsetLeft; //大鱼横坐标
					var littleoffy = e.offsetTop; //小鱼纵坐标
					var fashoffy = $("#fash")[0].offsetTop; //大鱼纵坐标

					//主鱼的大小
					var wit = $("#fash").css("width");
					wit = wit.substring(0, wit.length - 2);
					
					//小鱼消失
					if ((littleoffx > fashoffx && littleoffx < fashoffx * 1 + wit * 1 && littleoffy > fashoffy && littleoffy <
						fashoffy * 1 + wit * 1)||( fashoffx> littleoffx &&  fashoffx<littleoffx  * 1 + wit * 1 &&  fashoffy>littleoffy  &&  fashoffy<
						 littleoffy* 1 + wit * 1)) {
							//死亡
							var littlesiz=$(e).css("width");//小鱼大小
							
							if(parseInt(littlesiz)>wit*1){
								die($("#fash"));
								return false;
							}
						e.remove();
						var hei = $("#fash").css("height");
						hei = hei.substring(0, hei.length - 2);
						numb++;
						if(littlesiz==arr[1])number++;
						if(littlesiz==arr[2])number++;
						$("#n").text(numb)//吞噬数量增加
						if(!boo&&numb>=60){$("#diyi").show();return false;}
						$("input").val(numb) //设置进度条
						if ($("input").val() == 30) {
							grow($("#fash")[0], 70); //长大
						}
						if ($("input").val() == 60) {
							grow($("#fash")[0], 100); //长大
							if(boo){
								boo=false;
							}
						}
						loadfash();
					}
				})
			}
			
			//死亡动画
			function die(obj){
				obj.hide(100);
				obj.show(100);
				life--;
			}

			//长大
			function grow(obj, siz1) {
				var siz2 = $(obj).css("width"); //取出对象的大小
				siz2 = siz2.substring(0, siz2.length - 2)
				$(obj).animate({
					width: siz2 * 1 + 1 * siz1 + "px",
					height: siz2 * 1 + 1 * siz1 + "px"
				}, 10)
			}

			//生成小鱼仔
			function loadfash() {
				var littlefash = document.createElement("img");
				var r=Math.floor(Math.random()*5)
				loadfash2(arr[r%3])//随机生成
				loadfash2(arr[0])//固定小鱼
			}
			//生成鱼仔
			function loadfash2(si1) {
				var littlefash = document.createElement("img");
				$(littlefash).attr("src", "yc/img/鳄鱼.png");
				if(si1==arr[1])$(littlefash).attr("src", "yc/img/左.png");
				if(si1==arr[2])$(littlefash).attr("src", "yc/img/鱼3.png");
				$(littlefash).attr("class", "img")
				$(littlefash).css("width", si1+"px").css("height", si1+"px")
				$("body").append(littlefash)
				method(littlefash) //让所有小鱼随机移动
			}
		</script>
	</body>
</html>
